<template>
	<view>
		<customHeader>
			<template v-slot:bg>
				<image :style="{opacity: barOp}" class="head-bg" src="../../static/image/version/home_bg.png"></image>
			</template>
			<template v-slot:left>
				<view class="locations">
					<image class="icons" src="../../static/image/version/local.png"></image>
					<text>渝渔速生鲜采购配送一站式平台</text>
					<!-- <view>解放大道站</view> -->
					<!-- <image class="downs" src="../../static/image/version/downs.png"></image> -->
				</view>
			</template>
		</customHeader>
		<view class="search-rows" :style="{ 'padding-top': searchPadingTop + 'px', 'background-color': `rgba(255, 255, 255, ${1 - barOp})` }">
			<view :style="{'width': searchWidth + 'rpx'}">
				<view>
					<image src="../../static/image/version/search.png"></image>
					<input placeholder="海鲜" v-model="searchVal"/>
				</view>
				<view class="btns" @click="goSearch">搜索</view>
			</view>
		</view>
		<view class="bg-box">
			<view class="conts">
				<view class="changxian" v-if="homeData.config.show_taste_fresh == 2">
					<image src="../../static/image/version/changxian.png"></image>
					<view class="shop-row">
						<view v-for="(it, ix) in getSlice(homeData.xrcxList, 4)" :key="ix" @click="openDetail(it)">
							<image mode="aspectFill" :src="it.image"></image>
							<view>
								<text>￥</text>
								<view>{{it.shop_price}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="pin-tip">
					<view>
						<image src="../../static/image/version/ziying.png"></image>
						<text>优鲜自营</text>
					</view>
					<view>
						<image src="../../static/image/version/tim.png"></image>
						<text>次日达</text>
					</view>
					<view>
						<image src="../../static/image/version/a.png"></image>
						<text>售后无忧</text>
					</view>
				</view>
				<view class="type-box">
					<view v-for="(it,ix) in getSlice(homeData.categoryList, 10)" :key="ix" @click="goType(it)">
						<image :src="it.icon"></image>
						<view>
							<text>{{it.name}}</text>
						</view>
					</view>
				</view>
				<view class="banner" v-if="homeData.advertList.length">
					<swiper class="swiper" circular :autoplay="true" :interval="2000"
						:duration="500">
						<swiper-item v-for="(it, ix) in homeData.advertList" :key="ix" >
							<image mode="aspectFill" :src="it.icon" @click="actionJumps(it)"></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="set-lr"
				v-if="homeData.config.show_today_seckill == 2 || homeData.config.show_anxin_seafood == 2"
				>
					<view class="time-buy">
						<view v-if="homeData.config.show_today_seckill == 2">
							<view class="buy-tit">
								<text>今日秒杀</text>
								<view class="tims">{{homeData.config.seckill_start_time}}</view>
							</view>
							<view class="buy-tip">精选推荐 限时折扣</view>
							<view class="buy-shop">
								<view v-for="(it, ix) in getSlice(homeData.jrmsList, 2)"
								 @click="openDetail(it)"
								 :key="ix">
									<image mode="aspectFill" :src="it.image"></image>
									<view>￥{{it.shop_price}}</view>
									<text>￥{{it.market_price}}</text>
								</view>
							</view>
						</view>
						<view v-if="homeData.config.show_anxin_seafood == 2">
							<view class="buy-tit">
								<text>安心海鲜</text>
								<view class="ups">
									<image src="../../static/image/version/nao.png"></image>今日上架
								</view>
							</view>
							<view class="buy-tip">海鲜降价啦！</view>
							<view class="buy-shop">
								<view class="up-jia" v-for="(it, ix) in getSlice(homeData.axhxList, 2)"
								 @click="openDetail(it)"
								 :key="ix">
									<image mode="aspectFill" :src="it.image"></image>
									<view>￥{{it.shop_price}}</view>
									<text>￥{{it.market_price}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view>
					<view class="shop-tab">
						<view v-for="(it,ix) in shopType" :key="ix" 
						@click="checkType(it)"
						:class="{'activs': searchForm.type === it.id}">
							<text>{{it.tit}}</text>
							<view>{{it.sub}}</view>
						</view> 
					</view>
					<view class="shop-box" v-if="homeData.jxhhList.length">
						<view class="shop-item" v-for="(it, ix) in homeData.jxhhList" :key="ix" @click="openDetail(it)" hover-class="hover_class">
							<image mode="aspectFill" :src="it.image"></image>
							<view>
								<view class="tit-box">
									<view>买过</view>
									<text>{{ it.name }}</text>
								</view>
								<view class="it-tip">
									<text>{{it.describe}}</text>
								</view>
								<view class="price-row">
									<view class="rices">
										<text>￥</text>
										<view>{{it.shop_price}}</view>
									</view>
									<view @click.stop="addCart(it)" hover-class="hover_class">
										<!-- <view v-if="it.cartNum" class="add-car">
											<image src="../../static/image/version/add.png"></image>
											<view>{{it.cartNum}}</view>
										</view> -->
										<image class="cars" src="../../static/image/version/car.png"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="emptyds">
						<empty title="暂无商品信息"/>
					</view>
				</view>
			</view>
		</view>
		<view class="fixed-bot" v-if="!isLogin">
			<text>立即登录，开启更多精彩内容~</text>
			<view hover-class="hover_class" @click="loginPop">立即登录</view>
		</view>
		<agreement ref="agreement" @getPhoneNumber="getPhoneNumber" />
		<protocol />
		<rulePop ref="rulePop" />
	</view>
</template>

<script>
import agreement from '@/component/agreement/index'
import protocol from '@/component/protocol'
import rulePop from '@/pages/home/component/rulePop'
import {
	bindInfoByEncryptio,
	getSessionIdByJsCode
} from 'utils/api/user.js'
import {
	homeIndex,
} from 'utils/api/home.js'
import store from '@/store'
export default {
	components: {
		agreement,
		protocol,
		rulePop
	},
	data() {
			return {
				shopType: [
					{ tit: '全部', sub: '精选好货', id: 1 },
					{ tit: '为您推荐', sub: '样样新鲜', id: 'is_wntj' },
					{ tit: '热销爆品', sub: '热门好货', id: 'is_rxbp' },
					{ tit: '新品上架', sub: '今日新品', id: 'is_xpsj' },
					{ tit: '火锅专区', sub: '热销产品', id: 'is_hgzq' },
				],
				searchForm: {
					type:1
				},
				isLogin: true,
				loginCode: '',
				homeData: {
					advertList: [],
					config: {},
					axhxList: [],
					jrmsList: [],
					xrcxList: [],
					categoryList: [],
					jxhhList: []
				},
				allShop: [],
				searchVal: '',
				statusBarHeight: 0,
				barOp: 1,
				searchPadingTop: 0,
				searchWidth: 710
			}
	},
	onShow() {
		this.getLocation()
		this.isLogin = uni.getStorageSync('token')
		this.getData()
		if(this.isLogin) {
			this.jumpPage({
				data: {
					session_id: this.isLogin,
					is_admin: uni.getStorageSync('is_admin')
				}
				
			})
		} else {
			this.autoLogin()
		}
	},
	onLoad() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	},
	onPageScroll(res) {
		let top = res.scrollTop
		// 计算固定头部高度（customHeader的高度）
		let headerHeight = this.statusBarHeight + 49;
		// 当滚动距离超过头部高度时，设置搜索栏吸顶
		if (top == 0) {
			this.barOp = 1
			this.searchWidth = 710
			this.searchPadingTop = 0
		}else if (top <= headerHeight) {
			this.barOp = 1 - (top / headerHeight)
			this.searchWidth = 710 - (top/headerHeight)*200
			this.searchPadingTop = 0 + (top/headerHeight)*this.statusBarHeight
		} else {
			this.barOp = 0
			this.searchWidth = 510
			this.searchPadingTop = this.statusBarHeight
		}
	},
	methods: {
		getLocation() {
			uni.getLocation({
				type: 'wgs84',
				success: function (res) {
					console.log(res);
					console.log('当前位置的纬度：' + res.latitude);
				}
});
		},
		// 前往分类
		goType(it) {
			store.commit('setShopId', it.id)
			uni.switchTab({
				url: '/pages/shopType/index'
			})
		},
		// 添加购物车
		addCart(item) {
			this.$refs.rulePop.openPop(item)	
		},
		getSlice(list, num) {
			if(list && list.length) {
				return list.slice(0, num)
			} else {
				return []
			}
		},
		// banner操作
		actionJumps(item) {
			if(item.type == 2) {
				uni.navigateTo({
					url: '/pages/webview/index?url=' + item.weburl
				})
			}
			if(item.type == 3) {
				uni.navigateTo({
					url: '/userPackage/pages/instructions/index?id=' + item.id
				})
			}
		},
		// 获取手机号码
		getPhoneNumber (e) {
			if(e.detail.iv) {
				uni.showLoading({
					title: '登录中',
					mask: true
				})
				bindInfoByEncryptio({
					js_code: this.loginCode,
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData,
					rec_code: e.rec_code,
					shop_name: e.shop_name
				}).then((res) => {
					this.jumpPage(res)
				}).catch(() => {
					this.getWxCode()
				})
			} else {
				uni.showToast({ title: '授权失败', icon: 'none'})
			}
		},
		// 隐私协议
		loginPop() {
			this.$refs.agreement.check()
		},
		// 获取微信code
		getWxCode() {
			const _this = this
			return new Promise((resolve, reject) => {
				uni.login({
					success(res) {
						_this.loginCode = res.code
						resolve(res)
					},
					fail(err) {
						reject(err)
					}
				})
			})
		},
		// 自动登录
		autoLogin() {
			this.getWxCode().then((data) => {
				uni.showLoading({
					title: '自动登录中',
					mask: true
				})
				getSessionIdByJsCode({js_code: data.code}).then((res) => {
					uni.hideLoading()
					if(res.data && res.data.length!==0) {
						this.jumpPage(res)
					} else {
						this.getWxCode()
					}
				})
			})
		},
		jumpPage(res) {
			this.isLogin = res.data.session_id
			uni.setStorageSync('token', res.data.session_id)
			uni.setStorageSync('is_admin', res.data.is_admin)
			if(res.data.is_admin == 2) {
				// 管理员
				uni.reLaunch({
					url: '/managePackage/pages/orderList/index'
				});
			} else {
				// if(!res.data.type) {
				if(res.data.type == 2) {
					// 司机
					uni.reLaunch({
						url: '/driverPackage/pages/orderList/index'
					});
				} else {
					// 用户
					this.getData()
				}
			}
			uni.hideLoading()
		},
		// 查看详情
		openDetail(item) {
			uni.navigateTo({
				url: '/managePackage/pages/shopDetail/index?id=' +item.id
			})
		},
		checkType(it) {
			this.searchForm.type = it.id
			if(it.id === 1) {
				this.homeData.jxhhList = this.allShop
			} else {
				const filterList = this.allShop.filter((item) => item[it.id] == 2)
				this.homeData.jxhhList = filterList
			}
		},
		goSearch() {
			uni.navigateTo({
				url: '/managePackage/pages/shopSearch/index?val=' + this.searchVal
			})
		},
		getData () {
			homeIndex().then((res) => {
				this.homeData = res.data
				this.allShop = JSON.parse(JSON.stringify(res.data.jxhhList || []))
			})
		},
	}
}
</script>

<style scoped lang="scss">
@import './index.scss';

</style>